<!-- <script >

import {reactive,ref} from 'vue'
export default{
  

  //钩子函数
  setup(){
    //在setup中，定义的变量，对象，都是普通的变量(对象)
    let msg = ref("hello Vue2");
    let num = ref(0);
    //reactive:将普通对象变成可响应的状态 可以深层响应 浅层:shallowReactive
    let person=reactive({
      name:"cp",
      age:18,
      addr:{
        prov:"福建"
      }
    })
//methods
    function fn() {
      console.log('这是fn');
    }

//数据代理/劫持
    return{
      msg,
      fn,
      num,
      person
    }
  }
}
</script> -->


<!-- 自动向外暴露，不需要export defalut  ，
      不需要return，vue中会自动进行数据代理
-->
<script setup>
import {reactive,ref} from 'vue'
    //在setup中，定义的变量，对象，都是普通的变量(对象)   
    let msg = ref("hello Vue2");
    //ref原理: ref会将普通变量包装成响应式的对象 num{value:5}
    let num = ref(5);
    console.log(num);
    //reactive:将普通对象变成可响应的状态 可以深层响应 浅层:shallowReactive

    // ref   person{value:{name,age,addr：{}}}
    let person=reactive({
      name:"cp",
      age:18,
      addr:{
        prov:"福建"
      }
    });
    // person1{name,age{value:18}, addr}
    let person1={
      name:"cp",
      age:ref(18),
      addr:{
        prov:"福建"
      }
    };

    function add() {
      num.value++;
      console.log(person1.age.value);
    }
    function change() {
      person.value.addr.prov = "广东"
    }
</script>
<!-- ref:在模板中使用的时候，Vue内部会自动进行 解包  的操作
  num ->  num.value

  注意点：解包只能在顶层对象中解包  person.value.age    person1.value.age
-->
<template>
  <div>{{msg}}</div>
  <button @click="change">CLICK</button>{{ person.age }} {{ person.addr.prov }}
  <button @click="add">点击{{ num }}</button>
  <br>
  <h1>{{ person.age +1 }}</h1>
  <h1>{{ person1.age.value}}</h1>
</template>